<template>
	<page-layout class="page">
		<pure-gap size="12px"></pure-gap>

		<view class="pj-padding-sides">
			<!-- 基础使用 -->
			<pj-demo title="基础使用">
				<pure-tag text="标签"></pure-tag>
			</pj-demo>

			<!-- 内置主题 -->
			<pj-demo title="内置主题">
				<pure-flex wrap>
					<pure-tag
						text="主要"
						theme="primary"
					></pure-tag>
					<pure-tag
						text="成功"
						theme="success"
					></pure-tag>
					<pure-tag
						text="警告"
						theme="warning"
					></pure-tag>
					<pure-tag
						text="危险"
						theme="danger"
					></pure-tag>
					<pure-tag
						text="信息"
						theme="info"
					></pure-tag>
				</pure-flex>
			</pj-demo>

			<!-- 扩展主题 -->
			<pj-demo title="扩展主题">
				<pure-flex wrap>
					<pure-tag
						text="扩展主题"
						theme="--custom-tag-theme-1"
					></pure-tag>
					<pure-tag
						text="扩展主题"
						theme="--custom-tag-theme-2"
					></pure-tag>
				</pure-flex>
			</pj-demo>

			<!-- 幽灵标签 -->
			<pj-demo title="幽灵标签">
				<pure-flex wrap>
					<pure-tag
						text="默认"
						ghost
					></pure-tag>
					<pure-tag
						text="主要"
						ghost
						theme="primary"
					></pure-tag>
					<pure-tag
						text="成功"
						ghost
						theme="success"
					></pure-tag>
					<pure-tag
						text="警告"
						ghost
						theme="warning"
					></pure-tag>
					<pure-tag
						text="危险"
						ghost
						theme="danger"
					></pure-tag>
					<pure-tag
						text="信息"
						ghost
						theme="info"
					></pure-tag>
					<pure-tag
						text="扩展"
						ghost
						theme="--custom-tag-theme-1"
					></pure-tag>
				</pure-flex>
			</pj-demo>

			<!-- 镂空标签 -->
			<pj-demo title="镂空标签">
				<pure-flex wrap>
					<pure-tag
						text="默认"
						plain
					></pure-tag>
					<pure-tag
						text="主要"
						plain
						theme="primary"
					></pure-tag>
					<pure-tag
						text="成功"
						plain
						theme="success"
					></pure-tag>
					<pure-tag
						text="警告"
						plain
						theme="warning"
					></pure-tag>
					<pure-tag
						text="危险"
						plain
						theme="danger"
					></pure-tag>
					<pure-tag
						text="信息"
						plain
						theme="info"
					></pure-tag>
					<pure-tag
						text="扩展"
						plain
						theme="--custom-tag-theme-1"
					></pure-tag>
				</pure-flex>
			</pj-demo>

			<!-- 圆角标签 -->
			<pj-demo title="圆角标签">
				<pure-flex wrap>
					<pure-tag
						text="默认"
						round
					></pure-tag>
					<pure-tag
						text="主要"
						round
						theme="primary"
					></pure-tag>
					<pure-tag
						text="成功"
						round
						theme="success"
					></pure-tag>
					<pure-tag
						text="警告"
						round
						theme="warning"
					></pure-tag>
					<pure-tag
						text="危险"
						round
						theme="danger"
					></pure-tag>
					<pure-tag
						text="信息"
						round
						theme="info"
					></pure-tag>
				</pure-flex>
			</pj-demo>

			<!-- 矩形标签 -->
			<pj-demo title="矩形标签">
				<pure-flex wrap>
					<pure-tag
						text="默认"
						square
					></pure-tag>
					<pure-tag
						text="主要"
						square
						theme="primary"
					></pure-tag>
					<pure-tag
						text="成功"
						square
						theme="success"
					></pure-tag>
					<pure-tag
						text="警告"
						square
						theme="warning"
					></pure-tag>
					<pure-tag
						text="危险"
						square
						theme="danger"
					></pure-tag>
					<pure-tag
						text="信息"
						square
						theme="info"
					></pure-tag>
				</pure-flex>
			</pj-demo>

			<!-- 前置图标 -->
			<pj-demo title="前置图标">
				<pure-flex wrap>
					<pure-tag
						text="前置图标"
						iconName="__loading"
						theme="primary"
					></pure-tag>
				</pure-flex>
			</pj-demo>

			<!-- 关闭按钮 -->
			<pj-demo title="关闭按钮">
				<pure-flex wrap>
					<pure-tag
						text="关闭按钮"
						closeable
						theme="success"
						@onClose="handleClose"
					></pure-tag>
				</pure-flex>
			</pj-demo>
		</view>

		<pure-gap size="12px"></pure-gap>
	</page-layout>
</template>

<script setup>
	import { ref, computed } from "vue";
	import { onLoad, onReady, onShow } from "@dcloudio/uni-app";

	// 关闭按钮点击事件
	function handleClose() {
		uni.showToast({
			title: "关闭按钮点击事件",
			icon: "none",
			duration: 1000
		});
	}
</script>

<style lang="scss" scoped>
	.page {
		--page-layout-background: var(--pure-background-default);

		// 扩展按钮主题
		--custom-tag-theme-1: #00a783;
		--custom-tag-theme-2: #9900ff;
	}
</style>
